<template>
    <view>
        <view class="container">
            <swiper class="swiper" :autoplay="true" circular>
              <swiper-item v-for="(item,index) in bannerList" :key="item.ID">
                <view class="bannerImageBox">
                  <image class="adverimg" :src="item" mode="aspectFill" @click="lookimg(bannerList,index)"></image>
                </view>
              </swiper-item>
            </swiper>
        </view>
        <view class="classinfo">
        <view class="classTitle">{{$util.entitiesToUtf16(reqData.ProductName)}}</view>
        <view class="pricebox">
            <text class="symbol">￥</text>
            <text class="newprice">{{reqData.Price}}</text>
            <!-- <text class="oldprice">￥399</text> -->
        </view>
        </view>
        <view class="classdet">
            <view class="Title_2">
                <view class="cowline"></view>
                <view class="text_1">课程详情</view>
            </view>
            <view class="classdebox">
                <image class="classde" v-for="(item,index) in classdeimg" :key="index" :src="item" mode="widthFix"></image>
            </view>
        </view>
        <view class="bottombox">
        <view class="box_6">
          <!-- #ifdef MP-WEIXIN -->
          <view class="text-wrapper_1" @click="goContact(0,coindex,reqData.ID,reqData.Price)">
            <text lines="1" class="text_11">立即预约</text>
          </view>
          <!-- #endif -->
          <!-- #ifdef APP-PLUS -->
          <view class="text-wrapper_1" @click="goContact(0,coindex,reqData.ID,reqData.Price)" style="flex: 1;">
            <text lines="1" class="text_11">立即预约</text>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    id:'',
    techid:'',
    bannerList:[],
    reqData:{},
    classdeimg:[],
    coindex:0,
    userid:'',
    te_userid:'',
};
},
onLoad(e){
    this.id = e.id
    this.coindex = e.index
    this.techid = e.techid
    this.userid = uni.getStorageSync('user').UserID
    this.ServerDetai()
},
methods: {
  lookimg(url, index, number) {
      let arr = []
      for (let i = 0; i < url.length; i++) {
        arr.push(url[i])
      }
      // arr = arr.map(item => item + this.ossWatermark)
      uni.previewImage({
        urls: arr,
        current: index,
      });
    },
    goContact(navindex,index, skliiID, Price){
        if(this.userid == this.te_userid){
        this.$pv.msg("无法对自己的服务进行预约");
        return
      }
      let _this = this
      let isAuth = uni.getStorageSync('user').IsAuth
      if (isAuth != 1) {
        uni.showModal({
          title: "温馨提示",
          content: "未注册用户不能预约，请先注册账号",
          confirmText: "关闭",
          cancelText: "注册账号",
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack({
                delta: 1,
              });
            } else if (res.cancel) {
              _this.nav_to("/pages/start/start2");
            }
          },
        });
      } else {
        this.nav_to('/pages/teacher/te_reserva?skillindex=' + index + '&skillid=' + skliiID + '&skillprice=' + Price + '&id=' + this.techid+'&navindex='+navindex)
      }
    },
    async ServerDetai(){
        let res = await this.$api.post("Technicians/ServerItemDetail",{
            ID:this.id
        })
        if(res.code == 0){
            this.reqData = res.data
            this.bannerList = res.data.Images.split(',')
            this.classdeimg = res.data.Description.split(',')
            this.te_userid = res.data.UserID
        }
    },
},

}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
.container {
  width: 100%;
}
.swiper {
  width: 100%;
  height: 426rpx;
}
.bannerImageBox {
  width: 100%;
  height: 100%;

  .adverimg {
    width: 100%;
  }
}
.classinfo{
    background-color: #fff;
    padding: 24rpx;
    margin-bottom: 16rpx;
    .classTitle{
        font-size: 32rpx;
        font-weight: bold;
        color: #333333;
        margin-bottom: 16rpx;
    }
    .pricebox{
        .symbol{
            font-size: 32rpx;
            color: #FC201C;
        }
        .newprice{
            font-size: 48rpx;
            font-weight: bold;
            color: #FC201C;
        }
        .oldprice{
            font-size: 32rpx;
            color: #999999;
            text-decoration: line-through;
        }
    }
}
.classdet{
    padding: 32rpx 24rpx;
    background-color: #fff;
    .Title_2{
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;
        .cowline{
            width: 6rpx;
            height: 32rpx;
            background: #706EEE;
            border-radius: 3rpx;
        }
        .text_1{
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
            margin-left: 6rpx;
        }   
    }
    .classdebox{
        .classde{
            width: 702rpx;
        }
    }
}

.bottombox {
  width: 100%;
  height: 196rpx;
  position: relative;
  z-index: 9999;
}

.box_6 {
  box-shadow: 0px -2px 4px 0px rgba(20, 20, 20, 0.1);
  background-color: rgba(255, 255, 255, 1);
  width: 750rpx;
  flex-direction: row;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20rpx 40rpx;
  position: fixed;
  bottom: 0rpx;
  z-index: 9999;
  padding-bottom: 40rpx;
  transition: 0.5s;
}
.image-text_1 {
  display: flex;
  flex-direction: column;

  >button {
    height: 50rpx;

    >image {
      width: 48rpx;
    }
  }
}
.text-wrapper_1 {
  background-color: #706EEE;
  border-radius: 44rpx;
  display: flex;
  justify-content: center;
  padding: 20rpx 32%;
  // margin-right: 70rpx;
}
.text_11 {
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 32rpx;
  font-family: PingFang-SC-Bold;
  font-weight: normal;
  text-align: right;
  white-space: nowrap;
  line-height: 52rpx;
}
</style>